<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('物流下单-详情')" />
    <th:block th:include="include :: businessCSS" />
    <style>
        .main-content{position: relative;}
        .topbtns{position:fixed;top: 0;width: 100%;z-index: 9999;background-color: #fff;}
        .preservationBtn{padding: 10px;margin: 0;position: fixed;top: 0;z-index: 9999;background: #fff;width: 100%;}
        .preservationBtn input{font-size: 16px;background-color: rgb(80, 138, 238);color: #fff;border: none;padding: 5px 30px;border-radius: 5px;cursor: pointer;}
        /* .layui-border-box{height: 350px !important;}
        .layui-table-body{height: 240px !important;} */
        .layui-table-tool-temp{padding-right: 30px;}
        .getDetailUpload,.getDetailUpload2{cursor: pointer;}
        .layui-table-tool-self{display: none;}

    </style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
    <div class="main-content">
        <form class="layui-form head-form">
            <!--        <div class="topbtns"><th:block th:include="include :: business_btn" /></div>-->
            <div class="north" style="background-color: #fff;margin-top: 55px;">
                <div class="layui-form-item preservationBtn">
                    <button class="layui-btn layui-btn-normal dhicon" type="button" lay-submit lay-filter="btn-edit" id="btn-edit">确定</button>
                </div>
                <div class="forminput"></div>
            </div>
            <div style="width: 100%;height: 10px;background: #f6f6f6;"></div>
            <div>
                <table class="layui-hide" id="mjdhtable" lay-filter="mjtable"></table>
                <script type="text/html" id="zjtoolbar">
                    <div style="padding: 16px;display: flex;justify-content: space-between;">
                        <div  style="font-weight: 700;font-size: 18px;">物流订单明细</div>
                    </div>
                </script>
            </div>

            <div class="spxx" style="display: none;">
                <table class="layui-hide" id="zjdhtable" lay-filter="zjtable"></table>
                <script type="text/html" id="jptoolbar">
                    <div style="padding: 16px;display: flex;justify-content: space-between;">
                        <div  style="font-weight: 700;font-size: 18px;">物流商品信息</div>
                    </div>
                </script>
            </div>
            <th:block th:include="include :: pageFooter" />
        </form>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: businessJS" />
<th:block th:include="include :: inlineJS" />


<script th:inline="javascript">
    /*<![CDATA[*/

    var fields = [[${fields}]];
    var fieldsList = [[${fieldsList}]];
    var fieldsHiddenList = [[${fieldsHiddenList}]];
    var moduleTable = [[${moduleTable}]];
    var enableEdit = [[${enableEdit}]];
    //母件表格基础信息
    var gridColumns = [[${gridColumns}]];
    //母件表格基础信息
    var gridColumnsZJ = [[${gridColumnsZJ}]];
    // 母件列表数据
    var List=[[${List}]];
    //子件列表数据
    // var sonList=[[${sonList}]];

    var tablecolsFh=[ [ //标题栏
        {align: 'center', title: '商品信息', colspan: 12,width: 100}
        ,{align: 'center', title: '装箱情况', colspan: 11,width: 100}
    ], [
        {align: 'center',field: 'serial', title: '操作', width: 100}
        ,{field: 'commodityCode', title: '商品编码', width: 100}
        ,{field: 'nameGoodsCn', title: '商品名称', width: 100}
        ,{field: 'asin', title: 'SKU', width: 100}
        ,{field: 'sku', title: 'ASIN', width: 100}
        ,{field: 'fnsku', title: 'FNSKU', width: 100}
        //TODO 未完善
        ,{field: 'asd', title: '品牌', width: 100}
        ,{field: 'asd', title: '型号', width: 100}
        ,{field: 'asd', title: '产品图片', width: 100}
        ,{field: 'asd', title: '产品用途（中文）', width: 100}
        ,{field: 'asd', title: '产品用途（英文）', width: 100}
        ,{field: 'asd', title: '产品重量(kg)', width: 100}
        ,{field: 'asd', title: '产品单位', width: 100}

        ,{field: 'nameGoodsCn', title: '商品品名(中文)', width: 100}
        ,{field: 'nameGoodsEn', title: '商品品名(英文)', width: 100}
        ,{field: 'codeGoodsHs', title: '海关编码', width: 100}
        ,{field: 'nameMaterialCn', title: '商品材质(中文)', width: 100}
        ,{field: 'nameMaterialEn', title: '商品材质(英文)', width: 100}
        //TODO 未完善
        ,{field: 'asd', title: '商品采购价（¥）', width: 100}
        ,{field: 'asd', title: '产品链接', width: 100}
        ,{field: 'asd', title: '每套几个装\n', width: 100}


        ,{field: 'numPlanDeliver', title: '计划发货数量', width: 100}
        ,{field: 'theFirstCase', title: '第一箱', width: 100}
        ,{field: 'theSecondCase', title: '第二箱', width: 100}
        ,{field: 'theThirdCase', title: '第三箱', width: 100}
        ,{field: 'theFourCase', title: '第四箱', width: 100}
        ,{field: 'theFiveCase', title: '第五箱', width: 100}
        ,{field: 'theFixCase', title: '第六箱', width: 100}
        ,{field: 'theSevenCase', title: '第七箱', width: 100}
        ,{field: 'theEightCase', title: '第八箱', width: 100}
        ,{field: 'theNineCase', title: '第九箱', width: 100}
        ,{field: 'theTenCase', title: '第十箱', width: 100}
    ] ]


    var $,layer,form,table,nid,noTable;
    console.log("enableEdit",enableEdit)
    layui.use(['laydate','form','layer','jquery','util','element','upload','table'], function () {
        $ = layui.$,layer = layui.layer,form = layui.form,laydate = layui.laydate,util = layui.util,element=layui.element,upload = layui.upload,table = layui.table;
        beforeInit();//表单初始化之前的动作集合
        //初始化操作
        headcom3()
        nid=$('#nid').val()
        // 保存按钮事件变化
        $(function(){
            $('.tp-save').attr('onclick','')
            $('.tp-save').attr('lay-filter','btn-edit')
            $('.tp-save').attr('lay-submit',true)
        })


        // 确认操作
        form.on('submit(btn-edit)', function(data){
            //TODO 是否由此按钮
        });


        var listData1=List ?List:[]
        var listData2;
        // 初始化表格
        $.tablelist.init({
            elem: '#mjdhtable'
            ,data: listData1
            , page: false
            , even: true
            , limit: 10000
            , totalRow: gridColumnsZJ.totalRow
            , cols: [gridColumnsZJ.gridBody]
            , toolbar: '#zjtoolbar'
            , defaultToolbar: [{title: '列设置', layEvent: 'fieldSet', icon: 'layui-icon-set'}]
            , height: '320'
            , done: function (res, curr, count) {
                listData1 = table.cache.mjdhtable;//每次重载都赋值更新表缓存
            },success:function(a,b,c){
            }
        });


        //单击选中行
        var comguid,comobj
        table.on('row(mjtable)', function(obj){
            comguid=obj.data.guid
            comobj=obj
            pddata1(obj)
        });

        //刷新详情列表表格
        function pddata1(obj){
            $('.demo2 .layui-tab-title li').removeClass('layui-this')
            $('.layui-tab-title li').attr('style','background:#fff;color:#666666');
            $('.demo2 .layui-tab-title li').eq(0).addClass('layui-this')
            $.get('/logstics/fbaLogisticsOrder/productDetails',{pguid:obj.data.pguid},function(res){
                var datalist=res.data.sonList;
                $.tablelist.init({
                    elem: '#zjdhtable'
                    , data: datalist
                    , page: false
                    , even: true
                    , limit: 10000
                    , totalRow: 200
                    , cols: tablecolsFh
                    , toolbar: '#jptoolbar'
                    , defaultToolbar: [{title: '列设置', layEvent: 'fieldSet', icon: 'layui-icon-set'}]
                    , height: '300'
                    , done: function (res, curr, count) {
                        datalist = table.cache.zjdhtable;//每次重载都赋值更新表缓存
                        $('.spxx').show();
                    }
                });
            })
        }
    });


</script>

</body>
</html>